<template>
	<view class="plbox" v-if="visible">
		<view class="plbox_title"><text class="plbox_title-t1">评论</text><text
				class="plbox_title-t2">({{current.commentnum}})</text></view>
		<image src="/static/img/close.png" class="plbox-close" @tap.stop="$emit('close')" />
		<scroll-view class="plbox_content" scroll-y="true" @scrolltolower="getmorecomment">
			<block v-for="(item, idx) in commentlist" :key="item.id">
				<view class="plbox_content-item">
					<view class="plbox_content-item-f1 flex0">
						<image :src="item.headimg" class="plbox_content-item-f1-img"></image>
					</view>
					<view class="plbox_content-item-f2 flex-col">
						<text class="plbox_content-item-f2-t1">{{item.nickname}}</text>
						<view class="plbox_content-item-f2-t2 plbox_content-plcontent">
							<block v-for="con in item.content">
								<text v-if="con.type=='text'"
									class="plbox_content-plcontent-text">{{con.content}}</text>
								<image v-if="con.type=='image'" :src="con.content"
									class="plbox_content-plcontent-image"></image>
							</block>
						</view>
						<block v-if="item.replylist.length>0">
							<view class="plbox_content-relist">
								<block v-for="(hfitem, index) in item.replylist" :key="index">
									<view class="plbox_content-relist-item2">
										<view class="flex-row">
											<image :src="hfitem.headimg" class="plbox_content-relist-headimg" />
											<text class="plbox_content-relist-nickname">{{hfitem.nickname}}</text>
										</view>
										<view class="plbox_content-relist-f2 plbox_content-plcontent"  v-for="(con, index) in hfitem.content" :key="index">
												<text v-if="con.type=='text'"
													class="plbox_content-plcontent-text">{{con.content}}</text>
												<image v-if="con.type=='image'" :src="con.content"
													class="plbox_content-plcontent-image"></image>
										</view>
									</view>
								</block>
							</view>
						</block>
						<view class="plbox_content-item-f2-t3">
							<text class="plbox_content-item-f2-t3-x1">{{item.createtime}}</text>
							<view class="plbox_content-item-f2-t3-x2"><text class="plbox_content-item-f2-phuifu"
									@tap="replyClick" :data-id="item.id" :data-nickname="item.nickname">回复</text>
							</view>
							<view class="plbox_content-item-f2-pzan" @tap="pzan" :data-id="item.id"
								:data-index="idx">
								<image :src="'/static/img/zan-' + (item.iszan==1?'2':'1') + '.png'"
									class="plbox_content-item-f2-pzan-img" /><text
									class="plbox_content-item-f2-pzan-txt">{{item.zan}}</text>
							</view>
						</view>
					</view>
				</view>
			</block>
			<view v-if="nomore"><text class="comment-nomore">没有更多数据了</text></view>
			<view v-if="nodata"><text class="comment-nodata">暂无评论!</text></view>
		</scroll-view>
		<!-- <loading v-if="loading"></loading> -->
		<view style="height:160rpx"></view>
		<view class="plbox-replyshadow" v-if="hfid!=0" @tap.stop="replyshadowClick"></view>
		<view class="pinglun">
			<image @tap="toggleFaceBox" class="pinglun-faceicon" src="/static/img/face-icon.png"></image>
			<input @confirm="sendMessage" @focus="faceshow = false" @input="messageChange" class="pinglun-input"
				confirmHold="true" confirmType="send" cursorSpacing="20" type="text" :value="message"
				:placeholder="messageholder" />
			<view class="pinglun-buybtn" @tap="sendcomment"><text class="pinglun-buybtn-txt">发表</text></view>
		</view>
		<wxface v-if="faceshow" @selectface="selectface"></wxface>
	</view>
</template>

<script>
	const app = getApp();
	
	export default {
		props: {
			visible: Boolean,
			current: Object
		},
		data() {
			return {
				pagenum: 1,
				commentlist: [],
				nodata: false,
				nomore: false,
				hfid: 0,
				message: "",
				messageholder: '发表评论',
				faceshow: false,
			}
		},
		watch: {
			visible(val) {
				if (val) this.getcommentlist()
			},
			'current.id'() {
				this.commentlist = []
			}
		},
		methods: {
			getmorecomment() {
				this.pagenum = this.pagenum + 1;
				if (!this.nomore && !this.nodata) {
					this.getcommentlist(true);
				}
			},
			selectface(face) {
				this.message = "" + this.message + face;
				this._trimMessage = this.message.trim();
			},
			sendcomment() {
				app.showLoading('提交中');
				app.post('ApiShortvideo/subpinglun', {
					id: this.current.id,
					hfid: this.hfid,
					content: this.message
				}, (res) => {
					app.showLoading(false);
					if (res.status == 0) {
						app.error(res.msg);
					} else {
						app.error(res.msg);
						
						this.$emit('success', res.commentnum)
						
						this.getcommentlist();
						this.message = '';
						this.hfid = 0;
						this.messageholder = '发表评论';
						this.faceshow = false;
					}
				});
			
			},
			messageChange(e) {
				this.message = e.detail.value;
				this._trimMessage = e.detail.value.trim();
			},
			toggleFaceBox() {
				this.faceshow = !this.faceshow
			},
			replyshadowClick() {
				this.hfid = 0;
				this.message = '';
				this.messageholder = '发表评论';
			},
			pzan(e) {
				const id = e.currentTarget.dataset.id;
				const index = e.currentTarget.dataset.index;
				const cur = this.commentlist[index]
				app.post("ApiShortvideo/pzan", {
					id: id
				}, (res) => {
					const iszan = res.type === 0 ? 0 : 1
					cur.iszan = iszan;
					cur.zan = res.zancount;
					this.$set(this.commentlist, index, cur)
				});
			},
			replyClick(e) {
				this.message = '';
				this.hfid = e.currentTarget.dataset.id;
				this.messageholder = '回复 ' + e.currentTarget.dataset.nickname + '：';
			},
			getcommentlist(loadmore) {
				if (!loadmore) {
					this.pagenum = 1;
					this.commentlist = [];
				}
				this.nodata = false;
				this.nomore = false;
				app.post('ApiShortvideo/getcommentlist', {
					id: this.current.id,
					pagenum: this.pagenum
				}, (res) => {
					const data = res.data;
					if (this.pagenum === 1) {
						this.commentlist = data;
						if (data.length === 0) {
							this.nodata = true
						}
					} else {
						if (data.length === 0) {
							this.nomore = true
						} else {
							const commentlist = this.commentlist;
							const newdata = commentlist.concat(data);
							this.commentlist = newdata;
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pinglun {
		width: 750rpx;
		padding: 0 20rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: #fff;
		z-index: 8;
		border-top: 1px solid #f7f7f7
	}
	
	.pinglun-faceicon {
		width: 46rpx;
		height: 46rpx;
		margin-left: 10rpx;
		margin-right: 18rpx
	}
	
	.pinglun-input {
		flex: 1;
		color: #000;
		font-size: 32rpx;
		padding: 0;
		line-height: 100rpx
	}
	
	.pinglun-buybtn {
		margin-left: 0.08rpx;
		background: #FD4A46;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 30rpx;
		border-radius: 6rpx
	}
	
	.pinglun-buybtn-txt {
		color: #fff;
		font-size: 28rpx;
		height: 60rpx;
		line-height: 60rpx;
	}
	
	.plbox {
		width: 750rpx;
		height: 700rpx;
		padding: 20rpx 20rpx;
		background: #fff;
		z-index: 999999;
		position: absolute;
		bottom: 0;
	}
	
	.plbox-replyshadow {
		position: absolute;
		z-index: 7;
		background: rgba(0, 0, 0, 0.4);
		width: 750rpx;
		flex: 1;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	
	.plbox-close {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		z-index: 7;
		width: 50rpx;
		height: 50rpx;
		padding: 10rpx;
	}
	
	.plbox_title {
		height: 60rpx;
		line-height: 60rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row
	}
	
	.plbox_title-t1 {
		font-size: 28rpx;
		color: #000;
		font-weight: bold
	}
	
	.plbox_title-t2 {
		font-size: 28rpx;
		color: #000;
		font-weight: bold
	}
	
	.plbox_content {
		height: 500rpx;
		overflow: scroll;
		display: flex;
	}
	
	.plbox_content-plcontent {
		display: flex;
		flex-direction: row;
		vertical-align: middle;
		color: #111
	}
	
	.plbox_content-plcontent-text {
		color: #111;
		font-size: 28rpx
	}
	
	.plbox_content-plcontent-image {
		width: 44rpx;
		height: 44rpx;
		vertical-align: inherit;
	}
	
	.plbox_content-item {
		flex: 1;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row
	}
	
	.plbox_content-item-f1 {
		width: 80rpx;
	}
	
	.plbox_content-item-f1-img {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%
	}
	
	.plbox_content-item-f2 {
		flex: 1
	}
	
	.plbox_content-item-f2-t1 {
		font-size: 28rpx
	}
	
	.plbox_content-item-f2-t2 {
		color: #000;
		padding: 10rpx 0;
		line-height: 60rpx;
	}
	
	.plbox_content-item-f2-t3 {
		display: flex;
		flex-direction: row;
		flex: 1
	}
	
	.plbox_content-item-f2-t3-x1 {
		color: #999;
		font-size: 26rpx;
	}
	
	.plbox_content-item-f2-t3-x2 {
		flex: 1;
		display: flex;
		flex-direction: row;
	}
	
	.plbox_content-item-f2-pzan {
		display: flex;
		flex-direction: row
	}
	
	.plbox_content-item-f2-pzan-img {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx
	}
	
	.plbox_content-item-f2-pzan-txt {
		font-size: 28rpx;
		color: #666
	}
	
	.plbox_content-item-f2-phuifu {
		margin-left: 6px;
		color: #507DAF;
		font-size: 26rpx
	}
	
	.plbox_content-relist {
		flex: 1;
		background: #f5f5f5;
		padding: 20rpx 20rpx 10rpx 20rpx;
		margin-bottom: 20rpx
	}
	
	.plbox_content-relist-item2 {
		font-size: 24rpx;
		margin-bottom: 10rpx
	}
	
	.plbox_content-relist-headimg {
		width: 30rpx;
		height: 30rpx;
		border-radius: 15rpx;
		margin-right: 8rpx
	}
	
	.plbox_content-relist-nickname {
		color: #333;
		font-size: 24rpx
	}
	
	.plbox_content-relist-f2 {
		margin-top: 10rpx
	}
	
	.comment-nodata {
		color: #666;
		font-size: 26rpx
	}
	
	.comment-nomore {
		flex: 1;
		color: #999;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
		text-align: center
	}
</style>